<script setup lang="ts">
import { inject } from 'vue'
import type { ModalService } from '@vivid-ui/plugins/modal'
// 使用服务方式
const modal = inject<ModalService>('modal') as ModalService

function openModal() {
  modal({
    title: '自定义弹窗',
    content: '这是一个通过服务方式打开的弹窗',
    width: 600,
    onConfirm: () => {
      console.log('点击了确定')
    },
    onCancel: () => {
      console.log('点击了取消')
    },
  })
}
const showAlert = () => {
  modal?.alert('这是一个提示框', '提示', () => {
    console.log('alert确认')
  })
}

const showConfirm = () => {
  modal?.confirm(
    '确定要执行此操作吗？',
    '确认操作',
    () => {
      console.log('confirm确认')
    },
    () => {
      console.log('confirm取消')
    },
  )
}
</script>

<template>
  <vi-button @click="openModal">
    Model
  </vi-button>
  <vi-button @click="showAlert">
    Model
  </vi-button>
  <vi-button @click="showConfirm">
    Model
  </vi-button>
</template>
